<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 20px;">
      <!-- 用户信息栏 -->
      <el-card shadow="hover">
        <div class="user">
          <img :src="getImageUrl('user')" class="user-img" />
          <div class="user-info">
            <p class="user-info-admin">admin</p>
            <p class="user-info-p">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>1920-10-1</span></p>
          <p>上次登录地点：<span>上海</span></p>
        </div>
      </el-card>
      <!-- 展示信息栏 -->
      <el-card shadow="hover" class="user-table">
        <el-table :data="tableData">
          <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup>
// import { useAllDataStore } from '../stores'
import { ref, getCurrentInstance, onMounted } from 'vue'

const { proxy } = getCurrentInstance();
const getTableData = async () => {
  const data = await proxy.$api.getTableData()
  // console.log(data);
  tableData.value = data.tableData
}
// 引入axios
const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href
}

//这个tableData是假数据，等会我们使用axios请求mock数据
const tableData = ref([
  {
    name: "Java",
    todayBuy: 100,
    monthBuy: 200,
    totalBuy: 300,
  },
  {
    name: "Python",
    todayBuy: 100,
    monthBuy: 200,
    totalBuy: 300,
  }
])

const tableLabel = ref({
  name: "课程",
  todayBuy: "今日购买",
  monthBuy: "本月购买",
  totalBuy: "总购买",
})

onMounted(() => {
  getTableData()
})

</script>

<style lang="less" scoped>
.home {
  height: 100%;
  overflow: hidden;
}

.home .user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #666;
}

.home .user .user-img {
  height: 140px;
  width: 140px;
  border-radius: 50%;
}

.home .user .user-info {
  margin-left: 15px;
}

.home .user .user-info .user-info-admin {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
}

.home .user .user-info .user-info-p {
  color: #999;
}

.home .login-info {
  margin-top: 10px;
}

.home .login-info p {
  line-height: 30px;
  font-size: 14px;
  color: #999;

  span {
    margin-left: 60px;
    color: #666;
  }
}

.user-table {
  margin-top: 20px;
}
</style>
